 <template>
  <div>
    <router-link to="/activate/add">
      <el-button
        class="filter-item add-style"
        style="margin-left: 10px;"
        type="primary"
        size="mini"
        icon="el-icon-circle-plus-outline"
      >添加</el-button>
    </router-link>

    <tTable :columns="columns" :data="fromData">
      <!-- 分类 -->
      <template v-slot:typeName="slotProps">
        <el-tag :type="slotProps.scope.row.typeName | typeFilter">{{slotProps.scope.row.typeName}}</el-tag>
      </template>
      <!-- 价格 -->
      <template v-slot:price="slotProps">
        <div v-if="slotProps.scope.row.price">￥{{slotProps.scope.row.price}}</div>
      </template>
      <!-- 分享价格 -->
      <template v-slot:sharePrice="slotProps">
        <div v-if="slotProps.scope.row.sharePrice">￥{{slotProps.scope.row.sharePrice}}</div>
      </template>
      <!-- 状态 -->
      <template v-slot:check="slotProps">
        <el-tag :type="slotProps.scope.row.check | checkFilter">{{slotProps.scope.row.check}}</el-tag>
      </template>

      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button
          type="info"
          size="mini"
          @click="editItem(slotProps.scope.row, slotProps.scope.$index)"
        >编辑</el-button>
        <el-button
          class="add-style"
          type="primary"
          size="mini"
          @click="reviewVideo(slotProps.scope.row, slotProps.scope.$index)"
        >预览</el-button>
        <el-button
          type="warning"
          size="mini"
          @click="getPerson(slotProps.scope.row)"
          v-if="slotProps.scope.row.type !== 'FREE'"
        >购买用户</el-button>

        <el-button
          type="danger"
          class="delete-style"
          size="mini"
          @click="removeItem(slotProps.scope.row)"
          slot="reference"
        >删除</el-button>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>

    <Review
      :videoUrl="videoUrl"
      :dislogVisible="dislogVisible && fromData[currentId].category === 'VIDEO'"
      :handleClose="handleClose"
    ></Review>
    <tText
      :content="fromData[currentId] && fromData[currentId].content"
      :dislogVisible="dislogVisible && fromData[currentId].category === 'TEXT'"
      :handleClose="handleClose"
    ></tText>
    <Audio
      :objectUrl="fromData[currentId] && fromData[currentId].objectUrl"
      :dislogVisible="dislogVisible && fromData[currentId].category === 'VOICE'"
      :handleClose="handleClose"
    ></Audio>
  </div>
</template>

<script>
import { formatDateTime } from "src/util/time.js";
import { getAllVideo, deleteVideo, getProductAllVideo } from "api/activate";
import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";
import Review from "src/components/review/review.vue";
import tText from "src/components/review/text.vue";
import Audio from "src/components/review/audio.vue";

export default {
  filters: {
    checkFilter(status) {
      const statusMap = {
        正在审核: "warning",
        审核通过: "success"
      };
      return statusMap[status];
    },
    // 分类
    typeFilter(status) {
      const statusMap = {
        免费: "success",
        付费: "warning",
        出售商品: "info",
        出售服务: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      videoUrl: "", // 当前视频预览地址
      dislogVisible: false, //是否显示预览框
      searchData: "",
      fromData: [],
      currentId: -1,

      total: -1,
      personTotal: -1, // 报名人员总数
      booleanTrue: true,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "title", label: "名称" }
        },
        {
          slot: "typeName",
          attr: { prop: "typeName", label: "分类", width: "100" }
        },
        {
          slot: "price",
          attr: { prop: "price", label: "价格", width: "100" }
        },
        {
          slot: "sharePrice",
          attr: { prop: "sharePrice", label: "分享价格", width: "100" }
        },
        {
          slot: "check",
          attr: { prop: "check", label: "状态", width: "100" }
        },
        {
          attr: { prop: "createTime", label: "创建时间", width: "160" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "400" }
        }
      ]
    };
  },
  components: { Review, Pagination, tTable, tText, Audio },
  mounted() {
    this.getData(1);
  },
  methods: {
    getData: function(pageNumber) {
      getAllVideo(pageNumber).then(res => {
        this.total = res.totalElements;
        this.fromData = res.content.map((item, index) => {
          item.createTime = formatDateTime(item.createTime);
          return item;
        });
      });
    },
    reviewVideo: function(item, index) {
      this.dislogVisible = true;
      this.videoUrl = item.objectUrl || "";
      this.currentId = index;
    },
    handleClose(done) {
      this.dislogVisible = false;
    },
    removeItem(item) {
      this.$confirm("确认删除这个商品么？").then(_ => {
        deleteVideo(item.id).then(res => {
          this.$message.success("删除成功");
          this.getData(1);
        });
      });
    },
    // 获取某一个视频产品的购买用户列表
    getPerson(item) {
      this.$router.push("/activate/buyer/" + item.id);
    },
    editItem(row) {
      this.$router.push("/activate/" + row.id);
    },
    handleChange: function(pageNumber) {
      this.getData(pageNumber);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

</style>
